<!DESCRIPTION>If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.
<!/DESCRIPTION>
<!CATEGORY>calenders<!/CATEGORY>
<!SCRIPT>
<!-- START OF SCRIPT -->
<!-- Step 1: Insert the below into the <HEAD> section of your page: -->
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<!-- The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.
Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.
Step 2: Finally, insert the below script where you wish the calendar to appear on your page:
-->
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
Basic Calendar uses one key function, buildCal(), to display a calendar. This function looks like this:
buildCal(4, 2003, "main", "month", "daysofweek", "days", 0)Here's an explanation of all of its parameters:
4 The month you wish to display, where 1=January, and 12=December.
2003 The year you wish to display.
main Name of the CSS class to style the calendar's outermost table.
month Name of the CSS class to style the calendar's month/year bar.
daysofweek Name of the CSS class to style the calendar's week days row
days Name of the CSS class to style the individual days cells.
0 The thickness of the border between all cells. 0=no border.
buildCal() simply returns the entire calendar in string format, so in order to display it, you'll need to invoke document.write(), as shown in the code of Step 2:
document.write(buildCal(4, 2003, "main", "month", "daysofweek", "days", 0))Such a design of Basic Calendar means you can easily invoke it many times on the page, and in a variety of ways.
-Displaying multiple calendar months
The below example displays the calendar for the previous, current, and future month. It should replace the code of Step 2:
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
As you can see, buildCal() is invoked three times here within table cells to display it three times on the page.
-Displaying an entire year dynamically
To demonstrate how versatile this script is, you can create simple functions to display the calendar dynamically, such as on demand using a drop down menu. The below code should replace the code of Step 2:
<form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
var themonths=['January','February','March','April','May','June',
Here we dynamically invoke buildCal() with different month parameters per the selected form option, and instead of using document.write() to output the result, assign it to the .innerHTML property of DHTML to dynamically display it instead.
Not bad for a "basic" calendar eh?
-->
<!-- END OF SCRIPT -->
<!/SCRIPT>
<!PREVIEW>
<!-- START OF SCRIPT -->
<!-- Step 1: Insert the below into the <HEAD> section of your page: -->
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<!-- The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.
Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.
Step 2: Finally, insert the below script where you wish the calendar to appear on your page:
-->
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
Basic Calendar uses one key function, buildCal(), to display a calendar. This function looks like this:
buildCal(4, 2003, "main", "month", "daysofweek", "days", 0)Here's an explanation of all of its parameters:
4 The month you wish to display, where 1=January, and 12=December.
2003 The year you wish to display.
main Name of the CSS class to style the calendar's outermost table.
month Name of the CSS class to style the calendar's month/year bar.
daysofweek Name of the CSS class to style the calendar's week days row
days Name of the CSS class to style the individual days cells.
0 The thickness of the border between all cells. 0=no border.
buildCal() simply returns the entire calendar in string format, so in order to display it, you'll need to invoke document.write(), as shown in the code of Step 2:
document.write(buildCal(4, 2003, "main", "month", "daysofweek", "days", 0))Such a design of Basic Calendar means you can easily invoke it many times on the page, and in a variety of ways.
-Displaying multiple calendar months
The below example displays the calendar for the previous, current, and future month. It should replace the code of Step 2:
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
As you can see, buildCal() is invoked three times here within table cells to display it three times on the page.
-Displaying an entire year dynamically
To demonstrate how versatile this script is, you can create simple functions to display the calendar dynamically, such as on demand using a drop down menu. The below code should replace the code of Step 2:
<form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
var themonths=['January','February','March','April','May','June',
Here we dynamically invoke buildCal() with different month parameters per the selected form option, and instead of using document.write() to output the result, assign it to the .innerHTML property of DHTML to dynamically display it instead.
